/*
 * @Author: zhangzhen
 * @Date: 2023-01-05 15:41:30
 * @LastEditors: zhangzhen
 * @LastEditTime: 2023-02-09 11:05:14
 *
 */
import React, {useContext, FC, useState} from 'react';
import {Input, Modal, Form, Select} from 'antd';
import {cloneDeep} from 'lodash';
import {FormContext} from '../../context';
import {getId} from '../../constant';
import AddOption from './AddOption';
import ApiModal from './apiModal';

const {TextArea} = Input;

const AddColumnsOption: FC<any> = ({
    visible,
    setVisible,
    currentColumnsValue,
    currentColumnsIndex,
}) => {
    const {
        setFormConTextValue,
        currentIndex,
        formConTextValue,
        setCurrentItem,
    } = useContext(FormContext);
    const [addForm] = Form.useForm();

    const [show, setShow] = useState<'1' | '2' | null>(null);
    const [isShow, setIsShow] = useState<boolean>(false);

    // 新增列
    const addColumns = () => {
        const cloneValue = cloneDeep(formConTextValue);
        const cloneColumns = cloneDeep(cloneValue[currentIndex].columns);
        const cloneDataSource =
            cloneDeep(cloneValue[currentIndex].dataSource) || [];
        addForm.validateFields().then((values) => {
            if (values.contentType === 'input') values.render = () => <Input />;
            if (values.contentType === 'textarea')
                values.render = () => <TextArea />;
            if (values.contentType === 'select')
                values.render = () => <Select options={values.options} />;
            // if (values.contentType === 'checkbox')
            //     values.render = () => <Checkbox />;

            values.dataIndex = getId(values.contentType);
            values.key = values.dataIndex;

            if (currentColumnsIndex !== null) {
                cloneColumns?.splice(currentColumnsIndex, 1, values);
            } else {
                cloneColumns?.push(values);
                cloneDataSource.push({
                    [`${values.dataIndex}`]: '',
                });
            }

            cloneValue[currentIndex].columns = cloneColumns;
            cloneValue[currentIndex].dataSource[0] = cloneDataSource;
            setFormConTextValue(cloneValue);
            setCurrentItem(cloneValue[currentIndex]);
            setVisible(false);
        });
    };

    return (
        <div>
            <Modal
                getContainer={false}
                open={visible}
                title="新增列"
                destroyOnClose
                width={500}
                onCancel={() => {
                    setVisible(false);
                }}
                onOk={() => {
                    addForm.submit();
                }}>
                <Form
                    form={addForm}
                    preserve={false}
                    onFinish={addColumns}
                    labelCol={{span: 4}}>
                    <Form.Item
                        label="列名"
                        name="title"
                        rules={[{required: true, message: '请输入'}]}
                        initialValue={
                            currentColumnsValue && currentColumnsValue.title
                        }>
                        <Input placeholder="请输入" maxLength={50} />
                    </Form.Item>
                    <Form.Item
                        label="字段名"
                        name="dataIndex"
                        initialValue={
                            currentColumnsValue && currentColumnsValue.dataIndex
                        }
                        rules={[{pattern: /^\w+$/, message: '请输入'}]}>
                        <Input placeholder="请输入" maxLength={50} />
                    </Form.Item>
                    <Form.Item
                        label="内容类型"
                        name="contentType"
                        rules={[{required: true, message: '请选择'}]}
                        initialValue={
                            currentColumnsValue &&
                            currentColumnsValue.contentType
                        }>
                        <Select
                            onChange={(value) => {
                                if (value === 'select') {
                                    setIsShow(true);
                                } else {
                                    setIsShow(false);
                                }
                            }}
                            options={[
                                {label: '单行文本', value: 'input'},
                                {label: '多行文本', value: 'textarea'},
                                {label: '下拉菜单', value: 'select'},
                                // {label: '多选', value: 'checkbox'},
                            ]}
                        />
                    </Form.Item>

                    {isShow && (
                        <Form.Item
                            label="数据获取"
                            name="isApi"
                            rules={[{required: true, message: '请选择'}]}
                            initialValue={
                                currentColumnsValue && currentColumnsValue.isApi
                            }>
                            <Select
                                onChange={(value) => {
                                    setShow(value);
                                }}
                                options={[
                                    {label: '手动录入', value: '1'},
                                    {label: '接口获取', value: '2'},
                                ]}
                            />
                        </Form.Item>
                    )}

                    {show === '1' && isShow && (
                        <Form.Item
                            initialValue={
                                currentColumnsValue &&
                                currentColumnsValue.options
                            }
                            shouldUpdate
                            label="配置"
                            name="options"
                            rules={[{required: true, message: '请选择'}]}>
                            <AddOption />
                        </Form.Item>
                    )}
                    {show === '2' && isShow && (
                        <Form.Item
                            initialValue={
                                currentColumnsValue &&
                                currentColumnsValue.options
                            }
                            shouldUpdate
                            label="配置"
                            name="options"
                            rules={[{required: true, message: '请选择'}]}>
                            <ApiModal />
                        </Form.Item>
                    )}
                </Form>
            </Modal>
        </div>
    );
};

export default AddColumnsOption;
